<template>
  <div class="record-center">
    <div class="record-top" style="height: 15vh">
      <div class="flex-1">
        <div class="border-line">
          <div class="text-record">{{ list.maintainNum }} <small style="margin-left:10px;font-size:20px">台</small></div
          >
        </div>
        <p>维修台次</p>
      </div>
      <div class="flex-1">
        <div class="border-line">
          <div class="text-record">{{ list.partsCost }}<small style="margin-left:10px">元</small></div
          >
        </div>
        <p>配件成本</p>
      </div>
      <div class="flex-1">
        <div class="border-line">
          <div class="text-record">{{ list.maintainPrice }}<small style="margin-left:10px">元</small></div
          >
        </div>
        <p>维修产值</p>
      </div>
      <div class="flex-1">
        <div class="border-line">
          <div class="text-record">{{ list.repairNum }}<small style="margin-left:10px">台</small></div
          >
        </div>
        <p>返修数</p>
      </div>
      <div class="flex-1">
        <div class="border-line">
          <div class="text-record">{{ list.workOrderNum }} <small style="margin-left:10px">单</small></div>
         
        </div>
        <p>工单数</p>
      </div>
    </div>

    <div class="record-middle">
      <div class="flex-3"><pie :project-map="projectMap" /></div>
      <div class="flex-1">
        <el-progress
          type="circle"
          :percentage="list.reachRate * 100"
          :width="170"
          :stroke-width="10"
          color="#67C23A"
        ></el-progress>
        <p>预约达成率</p>
      </div>
      <div class="flex-1">
        <el-progress
          type="circle"
          :percentage="list.clientLoseRate * 100"
          :width="170"
          :stroke-width="10"
          color="#409EFF"
        ></el-progress>
        <p>客户流失率</p>
      </div>
      <div class="flex-1">
        <el-progress
          type="circle"
          :percentage="list.punctualityCarRate * 100"
          :width="170"
          :stroke-width="10"
          color="#E6A23C"
        ></el-progress>
        <p>准时交车率</p>
      </div>
    </div>
    <el-row>
      <el-col :span="12"><line-bar /> </el-col>
      <el-col :span="12"> <more-line /> </el-col>
    </el-row>
  </div>
</template>

<script>
import { getReportDetail } from '@/api/after-sale/recordsCenter'
import pie from './component/pie'
import lineBar from './component/line'
import moreLine from './component/moreLine'

export default {
  name: 'index',
  components: {
    pie,
    lineBar,
    moreLine,
  },
  created() {
    this.getReportDetail()
  },
  data() {
    return {
      orderMap: [],
      list: {},
      projectMap: {},
    }
  },
  methods: {
    async getReportDetail() {
      const { data } = await getReportDetail()
      console.log(data)
      this.list = data
      let projectMap = data.projectMap
      let seriesData = []
      let legend = []
      for (let project in projectMap) {
        legend.push(project)
        let obj = { value: projectMap[project], name: project }
        seriesData.push(obj)
      }
      this.projectMap = {
        seriesData,
        legend,
      }
    },
  },
}
</script>

<style scoped lang="scss">
.record-center {
  height: calc(100vh - 110px);
  background-image: url(../../../../assets/data_bg.png);

  .record-top {
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      text-align: center;
    }
    p {
      color: #008a86;
      font-weight: bold;
      font-size: 20px;
      padding: 0;
      margin: 0;
    }
    .border-line {
      
      margin: 0 30px;
      position: relative;
      color: #fff;
      font-weight: bold;
      font-size: 30px;
      border-left: 4px solid #008a86;
      border-bottom: 3px solid #008a86;
      transform: skew(45deg);
      .text-record {
        display: block;
      transform: skew(-45deg) !important;
      ::before{
        position: absolute;
        height: 10px;
        width: 10px;
        background: #009a92;
        border-radius: 50%;
        content:'';
        left: -20px;
        top:-2px
      }
    }
    }
    
  }
  .record-middle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    div {
      text-align: center;
    }
    p {
      color: #fff;
      font-weight: bold;
      font-size: 22px;
    }
  }

  .flex-1 {
    flex: 1;
  }
  .flex-2 {
    flex: 2;
  }
  .flex-3 {
    flex: 3;
  }
}
</style>
